<template>
  <div class="surveyquery-data">
    <el-card style="position: relative;">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleSee="handleSee"
      >
        <template
          slot-scope="props"
          slot="checkStatus"
        >
          <span :style="{'color':props.obj.row.checkStatus=='0'?'red':'#67C23A'}"
            v-text="props.obj.row.checkStatus === '0' ? '未调查' : '已调查'"
          />
        </template>
      </table-list>
      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <el-dialog
      :title="searchDialog.title"
      v-if="searchDialog.visible"
      :visible.sync="searchDialog.visible"
      @close="closesearchDialog('searchDialog')"
      width="40%"
    >
       <el-form
        :model="searchDialog.data"
        ref="searchDialog.data"
        label-width="90px"
      >
        <el-form-item label="所属镇街">
          <el-input v-model="searchDialog.township_name" size="mini"/>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="searchDialog.name" size="mini"/>
        </el-form-item>
        <el-form-item label="调查状态">
          <!-- <el-input v-model="searchDialog.checkStatus" size="mini"/> -->
          <el-select v-model="searchDialog.checkStatus" placeholder="请选择调查状态" size="mini" style="width:100%;" @change="checkstatus">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closeDialog('searchDialog')"
        >取 消</el-button>
        <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="searchDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="searchDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="querySubmit"
              plain
              id="btn"
            />
          </div>
          <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'提 交'"
            plain
          />
        </el-popover>
      </span>
    </el-dialog>
    <el-dialog
      :title="seeDialog.title"
      v-if="seeDialog.visible"
      :visible.sync="seeDialog.visible"
      @close="closeseeDialog('seeDialog')"
      width="60%"
      top="10vh"
    >
      <el-form
        :model="seeDialog.data"
        ref="seeDialog.data"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="饮食服务单位名称">
              <el-input v-model="seeDialog.data.name" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度">
              <el-input v-model="seeDialog.data.lng" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目地址">
              <el-input v-model="seeDialog.data.address" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度">
              <el-input v-model="seeDialog.data.lat" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属镇街">
              <el-input v-model="seeDialog.data.township_name" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调查状态">
              <el-input v-model="seecheckStatus" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业面积（m2)">
              <el-input v-model="seeDialog.data.sellingArea" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="seeDialog.data.contactMan" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           <el-col :span="12">
            <el-form-item label="总处理风量（m3/h)">
              <el-input v-model="seeDialog.data.windCount" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="seeDialog.data.phoneNum" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
         <el-col :span="12">
            <el-form-item label="是否安装油烟净化设施">
              <el-input v-model="seeDialog.data.ifhb" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理人">
              <el-input v-model="seeDialog.data.duty_name" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           <el-col :span="12">
            <el-form-item label="经营场所就餐位（座）">
                <el-input v-model="seeDialog.data.sites" size="mini" :disabled="true"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="改造时间">
              <el-input v-model="seeDialog.data.releaseTime" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="油烟净化设施数量（台）">
              <el-input v-model="seeDialog.data.hbcount" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片">
              <el-button type="primary" size="mini" @click="recordHandleImage">查看图片</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="灶头数量（个）">
              <el-input v-model="seeDialog.data.zaotous" size="mini" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频">
              <el-button type="primary" size="mini" @click="recordHandleVideo">查看视频</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="recordHandleImageDialog.title"
      v-if="recordHandleImageDialog.visible"
      :visible.sync="recordHandleImageDialog.visible"
      @close="closerecordHandleImageDialog('recordHandleImageDialog')"
      width="20%"
    >
      <img :src="urlHandleImage" width="100%"/>
       <!-- <video :src="urlHandleVideo" controls="controls" width="100%">
        </video> -->
    </el-dialog>
     <el-dialog
      :title="recordHandleVideoDialog.title"
      v-if="recordHandleVideoDialog.visible"
      :visible.sync="recordHandleVideoDialog.visible"
      @close="closerecordHandleVideoDialog('recordHandleVideoDialog')"
      width="20%"
    >
       <video :src="urlHandleVideo" controls="controls" width="100%">
        </video>
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import TableProps from "../../utils/tableProps.js";
import Pagination from "../../components/Pagination/pagination";
import PageProps from "../../utils/pageProps.js";
import Hnew from "./Hnewsurvey"
export default {
  name: "SurveyQuery",
  components: {
    ToolsBtn,
    TableList,
    Pagination
  },
  data() {
    return {
      table: TableProps,
      page: PageProps,
      toolsData: {
        title: "环保调查查询",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: true }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      searchDialog: {
        title: "查询",
        visible: false,
        submitVisible: false,
        data: null,
        township_name: '',
        name: '',
        checkStatus: ''
      },
      userId: JSON.parse(sessionStorage.getItem("token")).userId,
      userlevel: JSON.parse(sessionStorage.getItem("token")).userlevel,
      seeDialog: {
        title: "编辑",
        visible: false,
        submitVisible: false,
        data: null
      },
      seecheckStatus: '',
      recordHandleImageDialog: {
        title: "查看图片",
        visible: false,
        submitVisible: false,
        data: null,
      },
      urlHandleImage: '',
      recordHandleVideoDialog: {
        title: "查看视频",
        visible: false,
        submitVisible: false,
        data: null,
      },
      urlHandleVideo: '',
      options: [{
        value: '0',
        label: '未调查'
      },{
        value: '1',
        label: '已调查'
      }],
      Statusid: ''
    }
  },
  created(){
    this.table.tHead = Hnew;
    this.table.identifier = false;
    this.table.hasOperation = true;
    this.table.operation.data = [
      {
        id: 1,
        label: "查看",
        Fun: "handleSee",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleSee"
      }
    ];
    this.getList(1,50)
  },
  methods: {
    getList(pageNo, size){
      this.table.data = [];
      this.table.loading = true;
      var params = {}
      if(this.userlevel === 0){
        params = {
          pageNo,
          size,
        }
      } else {
         params = {
          pageNo,
          size,
          userid: this.userId
        }
      }
      this.$api.LAWMONITORING.NEWSURVEY(params)
      .then(res => {
        this.table.data = res.data;
        this.page.total = res.count;
        this.table.loading = false;
      })
      .catch(() => {
        this.$message({
          showClose: true,
          message: '暂无数据',
          type: 'error'
        });
      })
    },
    checkstatus(val){
      this.Statusid = val
    },
    querySubmit(){
      this.searchDialog.visible = false;
      this.searchDialog.submitVisible = false;
      var params = {}
      if(this.searchDialog.township_name != ''){
        params = {
          township_name: this.searchDialog.township_name,
          pageNo: 1,
          size: 10
        }
      } else if(this.searchDialog.name != ''){
        params = {
          name: this.searchDialog.name,
          pageNo: 1,
          size: 50
        }
      } else if(this.searchDialog.checkStatus != ''){
        params = {
          checkStatus: this.Statusid,
          pageNo: 1,
          size: 50
        }
      }
      this.$api.LAWMONITORING.NEWSURVEY(params)
      .then(res => {
        this.table.data = res.data;
        this.page.total = res.count;
        this.table.loading = false;
      })
      .catch(() => { 
        this.$message({
          showClose: true,
          message: '暂无数据',
          type: 'error'
        });
      })
    },
    recordHandleImage(){
      this.recordHandleImageDialog.visible = true;
    },
    recordHandleVideo(){
      this.recordHandleVideoDialog.visible = true;
    },
    closeseeDialog(name){
      if(name === "seeDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closesearchDialog(name){
      if(name === "searchDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    //编辑
    handleEdit(){},
    // 删除
    handleSee(index, row){
      this.seeDialog.visible = true;
      this.seeDialog.title = `${row.name}查看`;
      this.seeDialog.data = row;
      this.urlHandleImage = row.imageUrl
      this.urlHandleVideo = row.videoUrl
      if(row.checkStatus === "0"){
        this.seecheckStatus = '未调查'
      } else {
        this.seecheckStatus = '已调查'
      }
    },
    closerecordHandleImageDialog(name){
      if(name === "recordHandleImageDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    closerecordHandleVideoDialog(name){
      if(name === "recordHandleVideoDialog"){
        this[name].visible = false;
        this[name].submitVisible = false
      }
      this[name].visible = false
    },
    fileSuccess(){
      this.$message({
        showClose: true,
        message: '上传成功',
        type: 'error'
      });
    },
    // 分页大小
    pageSizeChange(size) {
      // console.log(`每页 ${size} 条`);
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      // console.log(`当前页: ${pageNo}`);
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    // 新增数据
    addData() {
      // console.log("新 增");
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      this.searchDialog.visible = true;
      // console.log("搜索");
    },
     // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>
// /deep/ .handleSee{
//   color: #66c33a;
// }
/deep/.el-dialog__title{
  font-size: 12px;
}
/deep/.el-form-item__label{
  font-size: 12px;
}
</style>


